<template>
  <div>
    <a-modal title="SPU详情" :visible="visible" @before-open="open" @cancel="cancel" :footer="false" :align-center="false" title-align="start" top="50px" width="1000px" :mask-closable="false">
      <div>
        <div class="clearfix">
          <div class="fl" style="width: 200px; height: 200px">
            <a-image :src="getSrc(spuInfo)" :width="200" :height="200" />
          </div>
          <div class="fl" style="width: calc(100% - 200px)">
            <a-descriptions :data="spuBasicInfoList" :label-style="{ textAlign: 'right' }" :column="2">
              <template #label="{ data }">
                <span class="label">{{ data.label }}：</span>
              </template>
              <template #value="{ data }">
                <div v-if="data.label == 'SPU名称'">{{ spuInfo.spuName || '--' }}</div>
                <div v-if="data.label == 'SPU'">{{ spuInfo.spu || '--' }}</div>
                <div v-if="data.label == '产品类目'">{{ $extract(spuInfo, 'category.name') || '--' }}</div>
                <div v-if="data.label == '产品开发员'">{{ $extract(spuInfo, 'developer.name') || '--' }}</div>
                <div v-if="data.label == '开发部门'">{{ $extract(spuInfo, 'developer.deptName') || '--' }}</div>
                <div v-if="data.label == '销售员'">{{ getSalerNames(spuInfo) || '--' }}</div>
                <div v-if="data.label == '品牌'">{{ $extract(spuInfo, 'brand.name') || '--' }}</div>
                <div v-if="data.label == '标签'">
                  <span v-if="spuInfo.tagList" v-for="tag of spuInfo.tagList" class="tag-btn" :style="{ backgroundColor: tag.color }">{{ tag.name }}</span>
                  <span v-else>--</span>
                </div>
              </template>
            </a-descriptions>
          </div>
        </div>
        <div>
          <a-tabs v-model:active-key="currentPage">
            <a-tab-pane title="产品规格" key="1">
              <a-table v-if="visible" size="mini" class="table-two-line mt10" :data="productSkuList" :pagination="false" :bordered="{ cell: true }" :scroll="{ y: 400 }">
                <template #columns>
                  <a-table-column title="主图" #cell="{ record }" :width="60">
                    <ImgPopover :src="getSrc(record)">
                      <template #con>
                        <a-image width="40" height="40" fit="contain" :src="getSrc(record)" />
                      </template>
                    </ImgPopover>
                  </a-table-column>
                  <a-table-column title="SKU" #cell="{ record }" :width="140">
                    <!-- <a-typography-paragraph copyable>
                    <div class="cursor">
                      <TextLimit position="top" :rows="1" @click="showSku(record)" class="highlight">{{ record.sku }}</TextLimit>
                    </div>
                  </a-typography-paragraph> -->

                    <div class="cursor" @click="showSku(record)">
                      <TextLimit position="top" :rows="1" class="highlight">{{ record.sku }}</TextLimit>
                    </div>
                  </a-table-column>
                  <a-table-column title="产品名称" #cell="{ record }">
                    <TextLimit position="top" :rows="1">{{ record.skuName }}</TextLimit>
                  </a-table-column>
                  <a-table-column title="规格" #cell="{ record }">
                    <a-table-column v-if="specList.length > 0" v-for="item of specList" :title="item.nameCn" #cell="{ record }"> </a-table-column>
                    <div v-else>--</div>
                  </a-table-column>
                  <a-table-column title="重量（g）" #cell="{ record }">
                    {{ $extract(record, 'weight.weight') || '--' }}
                  </a-table-column>
                  <a-table-column title="体积（cm）" #cell="{ record }">
                    <a-space v-if="record.volume" wrap>
                      <div>{{ $extract(record, 'volume.length') ? $extract(record, 'volume.length') : '-' }}×</div>
                      <div>{{ $extract(record, 'volume.width') ? $extract(record, 'volume.width') : '-' }}×</div>
                      <div>{{ $extract(record, 'volume.height') ? $extract(record, 'volume.height') : '-' }}</div>
                      <div>{{ $extract(record, 'volume.unit') }}</div>
                    </a-space>
                    <div v-else>--</div>
                  </a-table-column>
                  <a-table-column title="销售员" #cell="{ record }">
                    <span>{{ getsaleName(record) || '--' }}</span>
                    <!-- <span v-if="record.salerList" v-for="item of record.salerList" class="name color">{{ item.name }}，</span> -->
                  </a-table-column>
                  <a-table-column title="采购部门" #cell="{ record }">
                    <span>{{ getDeptName(record) || '--' }}</span>
                    <!-- <span v-if="record.salerList" v-for="item of record.salerList" class="name color">{{ item.name }}，</span> -->
                  </a-table-column>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane title="产品图" key="2">
              <DownloadPic v-if="visible" ref="downloadPic" />
            </a-tab-pane>
            <a-tab-pane title="报关/装箱/包装" key="3">
              <ShowOverheadInfo v-if="visible" ref="showOverheadInfo" />
            </a-tab-pane>
            <a-tab-pane title="产品资料" key="4">
              <ShowSkuDataInfo v-if="visible" ref="showSkuDataInfo" />
            </a-tab-pane>
            <a-tab-pane title="刊登详情" key="5">
              <PublicationDel type="showDetail" v-if="visible" ref="publicationDel" />
            </a-tab-pane>
            <a-tab-pane title="产品属性" key="6">
              <div v-if="spuInfo.propList && spuInfo.propList[0]" class="mt10">
                <a-descriptions :data="propertyListData" bordered />
              </div>
              <a-empty v-else />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-modal>
  </div>

  <SkuDetail ref="skuDetail" :detail="detail" />
</template>

<script lang="ts">
  import { defineComponent, ref, computed, reactive, toRefs, nextTick } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { searchSpuDetail } from '@/api/product'
  import _ from 'lodash-es'
  import DownloadPic from './downloadPic.vue'
  import ShowOverheadInfo from './showOverheadInfo.vue'
  import ShowSkuDataInfo from './showSkuDataInfo.vue'
  import PublicationDel from './addSPu/publicationDel.vue'
  import SkuDetail from './SpuShowSkuDetail.vue'
  export default defineComponent({
    props: ['detail'],
    components: { DownloadPic, ShowOverheadInfo, ShowSkuDataInfo, PublicationDel, SkuDetail },
    setup(props, { emit }) {
      let visible = ref(false)
      const downloadPic = ref()
      const showOverheadInfo = ref()
      const showSkuDataInfo = ref()
      const publicationDel = ref()
      const skuDetail = ref()
      const data: any = reactive({
        spuInfo: {},
        specList: [],
        productSkuList: [],
        currentPage: '1',
        propertyListData: [],
        detail: {
          data: {},
        },
        conLoading: false,
        spuBasicInfoList: [
          { label: 'SPU名称', span: 2 },
          { label: 'SPU', value: '' },
          { label: '产品类目', value: '' },
          { label: '产品开发员', value: '' },
          { label: '开发部门', value: '' },
          { label: '销售员', value: '' },
          { label: '品牌', value: '' },
          { label: '标签', value: '' },
        ],
      })
      const open = () => {
        data.currentPage = '1'
        getSpuDetail()
      }

      const cancel = () => {
        data.spuInfo = {}
        data.productSkuList = []
        visible.value = false
      }

      const getSpuDetail = async () => {
        try {
          data.conLoading = true
          const res: any = await searchSpuDetail(props.detail.data.id)
          data.spuInfo = res?.data || {}
          data.productSkuList = []
          if (data.spuInfo.propList) delPropertyListData(data.spuInfo.propList)
          data.specList = data.spuInfo.specList
          nextTick(() => {
            data.productSkuList = data.spuInfo.productSkuList
          })
          downloadPic.value.init(data.spuInfo)
          showOverheadInfo.value.init(data.spuInfo)
          showSkuDataInfo.value.init(data.spuInfo)
          publicationDel.value.init(data.spuInfo)
        } catch (error) {}
        data.conLoading = false
      }

      const delPropertyListData = (list: any) => {
        data.propertyListData = []
        list.forEach((e: any) => {
          let obj = {
            label: e.name,
            value: '',
          }
          let text = ''
          switch (e.type) {
            case 1:
            case 4:
              text = e.valueStr
              break
            case 2:
            case 7:
            case 8:
              text = e.valueStrList && e.valueStrList.join(',')
              break
            case 3:
              text = e.valueBoolean ? '是' : '否'
              break
            case 5:
              text = e.valueNumber
              break
            case 6:
              text = e.valueBigDecimal
              break
            default:
              text = '类型未定义'
              break
          }
          obj.value = text
          data.propertyListData.push(obj)
        })
      }

      const getSrc = (item: any) => {
        let arr = item?.productPicList || []
        let str = arr[0]?.url || ''

        let newStr = ''
        if (str.indexOf('cdn.shopify.com')) {
          newStr = `https://erpapi.selleroa.com/v1/aliyun/oss/getAmazonImage?url=${str}`
        } else {
          newStr = str
        }
        return newStr
      }

      const getValueCn = (title: any, item: any) => {
        let arr = item?.specValueList || []
        let info: any = arr.find((e: any) => e.nameCn == title.nameCn)
        return info ? info.valueCn : ''
      }

      const showSku = (info: any) => {
        data.detail.data = info
        skuDetail.value.visible = true
      }

      const getsaleName = (info: any) => {
        let arr = info.salerList || []
        return arr.map((e: any) => e.name).join('，')
      }

      const getDeptName = (info: any) => {
        let arr = info.purchaseDeptList || []
        return arr.map((e: any) => e.name).join('，')
      }

      const getSalerNames = (data: any) => {
        let arr = data.salerList || []
        return arr.map((e) => e.name).join(',')
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        getSrc,
        getValueCn,
        downloadPic,
        showOverheadInfo,
        showSkuDataInfo,
        publicationDel,
        skuDetail,
        showSku,
        getsaleName,
        getDeptName,
        cancel,
        getSalerNames,
      }
    },
  })
</script>

<style lang="less" scoped>
  .tag-btn {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    color: white;
    margin-right: 5px;
  }

  :deep(.arco-typography) {
    display: flex;
  }
</style>
